<template>
	<div>
		<!--
         	作者：1813180149@qq.com
         	时间：2017-09-15
         	描述：客商维护
         -->
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">客商类型:</p>
			</el-col>
			<el-col :span="4" style="margin-right: 20px;">
				<el-select size="small" v-model="condition.customerType" placeholder="请选择客商类型" clearable @change="selectChange">
					<el-option v-for="item in customerTypeCom" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">客商分类:</p>
			</el-col>
			<el-col :span="4" style="margin-right: 20px;">
				<el-select size="small" v-model="condition.customerClassify" placeholder="请选择客商分类" clearable>
					<el-option v-for="item in customerClassifyCom" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
			<el-col :span="10" style="padding-left: 0px;text-align: right">
				<el-button type="primary" size="small" v-on:click='customerQuery'>查询</el-button>
				<el-button type="primary" size="small" v-on:click='add'>新增</el-button>
				<el-button type="primary" size="small" v-on:click='startCom'>启用</el-button>
				<el-button type="primary" size="small" v-on:click='stopCom'>停用</el-button>
				<el-button type="primary" size="small" v-on:click='editCom'>编辑</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData.dataList" border style="width: 100%;align-content: center;" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="60">
					</el-table-column>
					<el-table-column label="客商编码" prop="customerCode" width="100">
					</el-table-column>
					<el-table-column label="客商名称" align="right" prop="customerName">
					</el-table-column>
					<el-table-column label="客商简称" align="right" prop="customerNick">
					</el-table-column>
					<el-table-column label="所属权限" align="right" prop="customerDiffer" :formatter="customerDifferCov">
					</el-table-column>
					<el-table-column label="客商类型" align="right" prop="customerType" :formatter="customerTypeCov">
					</el-table-column>
					<el-table-column label="客户分类" align="right" prop="customerClassify" :formatter="customerClassifyCov">
					</el-table-column>
					<el-table-column label="所属地区" align="right" prop="location">
					</el-table-column>
					<el-table-column label="VIN识别码" align="right" prop="vin">
					</el-table-column>
					<el-table-column label="地址" align="right" prop="address">
					</el-table-column>
					<el-table-column label="社会信用代码" align="right" prop="licence">
					</el-table-column>
					<el-table-column label="联系人" align="right" prop="contacts">
					</el-table-column>
					<el-table-column label="电话" align="right" prop="phoneNum">
					</el-table-column>
					<el-table-column label="状态" align="right" prop="status" :formatter="statusCov" width="80">
					</el-table-column>
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		<el-dialog title="客商维护" v-model="warehouseFormShow" size="small">
			<el-form :model="customerFromData" ref="warehouseForm" :rules="Rule" label-width="150px" style="height: 150px;">
				<el-col :span="12">
					<el-form-item label="客商代码：" prop="customerCode" required>
						<el-input size="small" v-model="customerFromData.customerCode"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="客商名称：" prop="customerName" required>
						<el-input size="small" v-model="customerFromData.customerName">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="客商简称：" prop="customerNick" required>
						<el-input size="small" v-model="customerFromData.customerNick">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="联系人：" prop="contacts">
						<el-input size="small" v-model="customerFromData.contacts">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所属权限：" prop="customerDiffer" required>
						<el-select size="small" v-model="customerFromData.customerDiffer" placeholder="选择客商类型" @change="selectChange">
							<el-option v-for="item in customerDifferCom" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="客商类型：" prop="customerType" required>
						<el-select size="small" v-model="customerFromData.customerType" placeholder="选择客商类型" @change="selectChange">
							<el-option v-for="item in customerTypeCom" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="客商分类：" prop="customerClassify" >
						<el-select size="small" v-model="customerFromData.customerClassify" placeholder="选择客商分类">
							<el-option v-for="item in customerClassifyCom" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所属地区：" prop="location">
						<el-input size="small" v-model="customerFromData.location">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="地址：" prop="address">
						<el-input size="small" v-model="customerFromData.address">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="电话：" prop="phoneNum">
						<el-input size="small" v-model="customerFromData.phoneNum">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="VIN识别码：" prop="vin">
						<el-input size="small" v-model="customerFromData.vin">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="社会信用代码：" prop="licence">
						<el-input size="small" v-model="customerFromData.licence">
						</el-input>
					</el-form-item>
				</el-col>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="warehouseFormShow = false">取 消</el-button>
				<el-button type="primary" v-on:click='save'>提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import moment from 'moment'
	export default {
		data: function() {
			return {
				//客商类型下拉
				customerTypeCom: [{
					label: "销货",
					value: "1"
				}, {
					label: "供货商",
					value: "0"
				}],//客商类型下拉
				customerDifferCom: [{
					label: "外部客商",
					value: "1"
				}, {
					label: "内部客商",
					value: "0"
				}],
				customerClassifyCom: [],
				//客商分类下拉供货
				customerClassifyCom0: [{
					label: "厂商",
					value: "0"
				}, {
					label: "经销商",
					value: "1"
				}],
				//客商分类下拉销货
				customerClassifyCom1: [{
					label: "批发",
					value: "2"
				}, {
					label: "零售",
					value: "3"
				}],
				//客商类型下拉
				warehouseType: [],
				//客商类型转换
				warehouseConvertData: {},
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				//公司数据
				tableData: {
					total: 0,
					dataList: []
				},
				condition: {
					customerType: "", //客商类型0、1(0供货商 1销货)
					customerClassify: "", //客商分类(0厂商1经销商2批发3零售)
				},
				warehouseFormShow: false,
				//校验规则
				Rule: {
					customerCode: [{
						required: true,
						message: '请输入客商代码',
						trigger: 'blur'
					}],
					customerName: [{
						required: true,
						message: '请输入客商名称',
						trigger: 'blur'
					}],
					customerNick: [{
						required: true,
						message: '请选择客商简称',
						trigger: 'blur'
					}],
					customerType: [{
						required: true,
						message: '请选择客商类型',
						trigger: 'blur'
					}],
//					customerClassify: [{
//						required: true,
//						message: '请选择客商分类',
//						trigger: 'blur'
//					}],
				},
				//校验规则
				Rules: {},
				customerFromData: {
					address: "",
					customerNick: "",
					deptId: "",
					updateUser: "",
					customerDiffer:"",//所属权限
					customerClassify: "",
					customerCode: "",
					updateTime: "",
					phoneNum: "",
					customerName: "",
					companyId: "",
					customerType: "",
					createTime: "",
					createUser: "",
					location: "",
					vin: "",
					id: "",
					contacts: "",
					status: "",
					licence:"",
				},
				emptycustomerFromData: {
					address: "",
					customerNick: "",
					deptId: "",
					updateUser: "",
					customerDiffer:"",//所属权限
					customerClassify: "",
					customerCode: "",
					updateTime: "",
					phoneNum: "",
					customerName: "",
					companyId: "",
					customerType: "",
					createTime: "",
					createUser: "",
					location: "",
					vin: "",
					id: "",
					contacts: "",
					status: "",
					licence:"",
				},

				multipleSelection: [],
				companyId: "",
			}
		},
		methods: {
			//客商类型的回调
			selectChange: function(val) {
				this.$data.condition.customerClassify = "";
				this.$data.customerFromData.customerClassify = "";
				if(val == 0) {
					this.$data.customerClassifyCom = this.$data.customerClassifyCom0;
				} else if(val == 1) {
					this.$data.customerClassifyCom = this.$data.customerClassifyCom1;
				}else{
					this.$data.customerClassifyCom =[];
				}
			},
			//客商类型转换
			customerTypeCov: function(row, column) {
				return row.customerType == "0" ? '供货商' : '销货';
			},
			//内外客商customerDiffer
			customerDifferCov: function(row, column) {
				return row.customerType == "0" ? '内部客商' : '外部客商';
			},
			//客商状态转换
			statusCov: function(row, column) {
				return row.status == "0" ? '停用' : '启用';
			},

			//客商分类转换
			customerClassifyCov: function(row, column) {
				switch(row.customerClassify) {
					case '0':
						return "厂商";
						break;
					case '1':
						return '经销商';
						break;
					case '2':
						return '批发';
						break;
					case '3':
						return '零售';
						break;
					default:
						''
						break
				};
			},
			warehouseTypeCovert: function() {
				this.$http.get(this.API_ROOT + '/base/dict/convert', {
					params: {
						group: "warehouse"
					}
				}).then((response) => {
					this.$data.warehouseConvertData = response.data;
				}, (response) => {});
			},

			//选择框
			handleSelectionChange: function(val) {
				debugger;
				this.$data.multipleSelection = val;
			},

			add: function() {
				this.$data.customerFromData = Object.assign(this.$data.customerFromData, this.$data.emptycustomerFromData);
				this.$data.warehouseFormShow = true;
			},
			//启用客商
			startCom: function() {
				if(this.$data.multipleSelection.length == 1) {
					debugger;
					var resRoleData = this.$data.multipleSelection[0];
					this.$http({
						method: 'POST',
						url: this.API_ROOT + '/scm/provideCompany/startOrStop',
						params: {
							status:"1",
							id: resRoleData.id,
						}
					}).then(function(resp) {
						if(resp.data.success) {
							// es5写法
							debugger;
							this.$message(resp.data.msg);
							this.customerQuery();
						} else {
							//debugger;
							this.$message.error(resp.data.msg);
						}
					}, function(error) {})
				} else {
					this.$message.error("请选择一条数据");
				}
			},
			//停用客商
			stopCom: function() {
				if(this.$data.multipleSelection.length == 1) {
					var resRoleData = this.$data.multipleSelection[0];
					this.$http({
						method: 'POST',
						url: this.API_ROOT + '/scm/provideCompany/startOrStop',
						params: {
							status:"0",
							id: resRoleData.id,
						}
					}).then(function(resp) {
						if(resp.data.success) {
							// es5写法
							debugger;
							this.$message(resp.data.msg);
							this.customerQuery();
						} else {
							//debugger;
							this.$message.error(resp.data.msg);
						}
					}, function(error) {})
				} else {
					this.$message.error("请选择一条数据");
				}
			},
			//编辑客商
			editCom: function() {
				debugger;
				if(this.$data.multipleSelection.length == 1) {
					var resRoleData = this.$data.multipleSelection[0];
					this.$http.get(this.API_ROOT + '/scm/provideCompany/info', {
						params: {
							id: resRoleData.id
						}
					}).then((response) => {
						debugger;
						this.$data.customerFromData = Object.assign(this.$data.customerFromData, response.data.data);
					}, (response) => {
						// error callback
					});
					this.$data.warehouseFormShow = true;
				} else {
					this.$message.error("请选择一条数据");
				}
			},
			//查询客商
			customerQuery: function() {
				debugger;
				this.$http.post(this.API_ROOT + '/scm/provideCompany/page', this.$data.condition, {
					params: {
						start: this.$data.CurentPage,
						limit: this.$data.page.pageSize
					}
				}).then(resp => {
					if(resp.data.success) {
						resp.data.total = parseInt(resp.data.total);
						// es5写法
						this.$data.tableData = resp.data;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});
			},
			//保存客商
			save: function() {
				this.$refs.warehouseForm.validate(function(valid, $event) {
					// 验证通过
					if(valid) {
						debugger;
						this.$http.post(this.API_ROOT + '/scm/provideCompany/save', this.$data.customerFromData)
							.then(resp => {
								if(resp.data.success) {
									debugger;
									this.customerQuery();
									this.$data.warehouseFormShow = false;
									this.$message(resp.data.msg);
								} else {
									this.$message.error(resp.data.msg);
								}
							}, resp => {
							});
					} else {
						return false
					}
				}.bind(this))
			},

			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				//this.$data.dictGroup = '';
				this.customerQuery();
			},
		},
		//表单创建时执行
		created: function() {
			this.warehouseTypeCovert();
			this.customerQuery();
			//获取客商类型下拉
			this.$http.get(this.API_ROOT + '/base/dict/combo', {
				params: {
					group: "customerType"
				}
			}).then((response) => {
				this.$data.customerTypeCom = response.data;
			}, (response) => {});

		}
	}
</script>
<style>
	.el-table .info-row {
		height: 10px !important;
	}
	
	.item {
		width: 30px;
	}
	
	.el-form-item {
		clear: both;
	}
	
	.el-dropdown .el-button-group,
	.el-table .el-tooltip,
	.el-table .el-tooltip__rel {
		display: inline;
	}
	
	.el-table {
		height: 100%;
		width: 100%;
	}
	
	#el-select {
		width: 200px;
	}
	
	.shili {
		/*padding-left: 60px;*/
		font-size: 12px;
		color: #999999;
	}
</style>